<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        因为form发请求会跳转页面
        可以使用ajax完成无跳转的请求
        ajax: Asynchrous JavaScript And XML 异步的js和xml(在js中发送异步的请求)
        html: Hyper Text Markup Language 超文本标记语言
        xml: eXtensible Markup Language 可扩展标记语言
        早期请求时数据的传递格式使用的是xml
        现在都是
        json: JavaScript Object Notation ,即js对象表示法
     -->
    <script>
        // XMLHttpRequest()
        // 对象用来与服务端进行交互
        // 1.构建一个XMLHttpRequest()对象
        var xhr = new XMLHttpRequest();
        // 2.监听请求状态的函数 一旦发送一个请求,请求会经历5个阶段
        xhr.onreadystatechange = function () {
            // xhr.readyState获取当前请求状态的 状态值 0 -- 4
            console.log(xhr.readyState);
            if(xhr.readyState === 0){  //第一个阶段
                console.log("请求尚未初始化,open执行之前");
            }else if(xhr.readyState === 1){
                console.log("请求初始化完成,open执行完,send还没执行");
            }else if(xhr.readyState === 2){
                console.log("send执行,服务端尚未处理");
            }else if(xhr.readyState === 3){
                console.log("服务端接收到了,开始处理");
            }else if(xhr.readyState === 4){
                console.log("服务端处理完成,做出响应,请求结束");
                console.log(xhr.responseText);
            }
            // xhr.responseText获取响应数据
            // (当前请求地址返回回来的数据是json字符串)
            if (xhr.readyState === 4) {
                var data = JSON.parse(xhr.responseText); //要转成json对象
                console.log(data);  // 获得数据
            }
        }
        // 3.配置请求信息 请求类型 请求地址
        // 参数1: 请求类型
        // 参数2: 请求地址(url)
        // 参数3: 是否发送异步请求(可省)
        // .open( 参数1，参数url，（参数3）)
        xhr.open("get", "https://cnodejs.org/api/v1/topics");
        // 4.发送这个请求
        xhr.send();

        // for (var i = 1; i < 10; i++) {
        //     var xhr = new XMLHttpRequest();
        //     xhr.onreadystatechange = function () {
        //         if (xhr.readyState === 4) {
        //             var data = JSON.parse(xhr.responseText);
        //             console.log(data);
        //         }
        //     }
        //     xhr.open("get", `https://cnodejs.org/api/v1/topics?page=${i}`);
        //     xhr.send();
        // }

    </script>
</body>

</html>